<template>
  <div class="add-form file-form">
    <div class="nb-tittle">{{ title }}</div>
    <el-form ref="form" :model="data" label-width="100px" class="hx-form" hide-required-asterisk :rules="rules">
      <el-form-item label="所属客户：" prop="customer_id">
        <v-select v-model="data.customer_id" action="customerList" :query="{}" class="detail-input" />
      </el-form-item>
      <el-form-item label="项目名称：" prop="name">
        <el-input v-model="data.name" class="detail-input" />
      </el-form-item>
      <el-form-item label="负责人：">
        <el-input v-model="userName" readonly class="detail-input" />
      </el-form-item>
      <el-form-item label="开始时间：" prop="start_time">
        <el-date-picker v-model="data.start_time" type="date" value-format="yyyy-MM-dd" placeholder="选择日期" />
      </el-form-item>
      <el-form-item label="备注：">
        <el-input
          v-model="data.content"
          type="textarea"
          :rows="2"
          style="width: 230px;"
          placeholder="请输入内容"
        />
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="submitForm('form')">提交</el-button>
        <el-button @click="cancel">取消</el-button>
        <el-button v-if="editId" type="danger" @click="fail">放弃项目</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>
<script>
import API from '@/api/project/project'
import { mapGetters } from 'vuex'
import VSelect from '@/components/select'
export default {
  inject: ['goUrl', 'isEdit', 'add', 'update', 'setStorage', 'clearStorage', 'getStorage'],
  components: { VSelect },
  data() {
    return {
      data: {},
      title: '',
      editId: '',
      value: '',
      userName: '',
      rules: {
        name: { required: true, message: '请输入招标单位', trigger: 'change' },
        customer_id: { required: true, message: '请选择客户', trigger: 'change' },
        start_time: { required: true, message: '请选择开始时间', trigger: 'change' }
      }
    }
  },
  computed: {
    ...mapGetters(['name'])
  },
  created() {
    const edit = this.isEdit()
    if (edit) {
      this.title = '项目详情'
      this.editId = edit
      this.info()
    } else {
      this.title = '新增项目'
      this.userName = this.name
      if (this.getStorage('project')) {
        this.data = this.getStorage('project')
      }
    }
  },
  mounted() {
    window.addEventListener('beforeunload', e => this.beforeunloadHandler(e))
  },
  methods: {
    info() {
      API.detail(this.editId).then(res => {
        this.data = res.data
        console.log(this.data)
        this.userName = this.data.cr_admin.name
      })
    },
    beforeunloadHandler(e) {
      this.clearStorage('project')
    },
    cancel() {
      if (!this.editId) {
        this.setStorage('project', this.data)
      }
      this.goUrl('/project')
    },
    fail() {
      const id = this.editId
      API.fail({ id }).then(res => {
        if (res.data.error_code === 1) {
          this.$message('已经放弃')
          this.goUrl('/project')
        } else {
          this.$message.error(res.data.message)
        }
      })
    },
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          if (this.editId) {
            this.update(API, this.data, '更新成功')
          } else {
            this.add(API, this.data, '新增成功')
            this.clearStorage('project')
          }
        } else {
          return false
        }
      })
    }
  }
}
</script>

<style scoped>
.add-form{
  background-color: #fff;
  border-radius: 5px;
}
.hx-form{
  padding: 0 60px 80px;
  margin-top: 40px;
}
.nb-tittle{
  padding: 30px 64px 0;
  font-size: 24px;
  font-weight: 400;
  color: #000000;
}

</style>
<style>
.file-form .el-input__inner {
  width: 230px;
}
</style>
